import React, { Component } from 'react';
import { TopDiv, DownDiv } from '../ListViewStyle'

class index extends Component {


  render() {
    // console.log(this.props)
    return (
      <>
        {/* 推荐、篮球那一行 */}
        <TopDiv>
          <ul>
            {
              this.props.navTop.map((item, index) => (
                <li
                  key={'top' + index}
                  className={ item.name === this.props.topActive.name ? 'active' : ''}
                  onClick={() => { this.props.changeTop(item) }}
                >
                  {item.name}
                </li>
              ))
            }
          </ul>
        </TopDiv>

        {/* 全部、单品推荐那一行 */}
        <DownDiv>
          <ul>
            {
              this.props.navDown.map((item, index) => (
                <li
                  key={'down' + index}
                  className={ item.name === this.props.downActive.name ? 'active' : ''}
                  onClick={() => { this.props.changeDown(item) }}
                >
                  {item.name}
                </li>
              ))
            }
          </ul>
        </DownDiv>

      </>
    );
  }
}

export default index;
